<template>
  <div>
    <div v-if="!isShowDetail">
      <jxf-titletip :title="title" @refreshPage="refreshFuc"></jxf-titletip>
      <el-card class="mt20">
        <el-form :inline="true" :model="searchInfo" ref="searchInfo">
          <el-form-item label="采购商账号:" prop="userName">
            <el-input v-model.trim="searchInfo.userName" clearable ref="input-userName" @keyup.enter.native="enterNextInput('enterpriseName')"></el-input>
          </el-form-item>
          <el-form-item label="企业名称:" prop="enterpriseName">
            <el-input v-model.trim="searchInfo.enterpriseName" clearable ref="input-enterpriseName" @keyup.enter.native="enterNextInput('salesmanName')"></el-input>
          </el-form-item>
          <el-form-item label="账号状态:" prop="status">
            <el-select v-model="searchInfo.status" clearable placeholder="全部">
              <el-option label="禁用" value="0"></el-option>
              <el-option label="启用" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属分公司:" prop="agentId">
            <el-select v-model="searchInfo.agentId" clearable placeholder="全部" @focus="getBranchList">
              <el-option :label="agents.userName" :value="agents.id" v-for="(agents, index) in branchList" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="对接业务员:" prop="salesmanName">
            <el-input v-model.trim="searchInfo.salesmanName" @keyup.enter.native="onSearch" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch()">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="resetForm('searchInfo')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="jxf-table-card mt20">
        <div slot="header" class="clearfix">
          <span>数据列表</span>
          <div>
            <el-button type="primary" @click="exportExcel" :loading="isSuccess">导出为Excel</el-button>
          </div>
        </div>
        <jxf-table class="" :table="dataTable">
          <template slot="credit" slot-scope="merchant">
            <div>{{merchant.row.credit == 0 ? "否" : "是"}}</div>
          </template>
          <template slot="userStatus" slot-scope="merchant">
            <div>{{merchant.row.userStatus === 0 ? "禁用" : "启用"}}</div>
          </template>
          <template slot="operation" slot-scope="merchant">
            <el-button type="text" @click="watchDetail(merchant.row)">查看详情</el-button>
            <el-button type="text" @click="abledBuyer(merchant.row)" v-if="merchant.row.userStatus === 0" class="c-red">启用</el-button>
            <el-button type="text" @click="disabledBuyer(merchant.row)" v-else class="c-red">禁用</el-button>
            <el-button type="text" @click="watchSubDetail(merchant.row)">查看子账户</el-button>
          </template>
        </jxf-table>
      </el-card>
      <jxf-pagination class="mt20" :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                      @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
    </div>
    <MerchantReview v-else :title="subTitle" @goBack="goBack" :dataInfo="subDataInfo" @goPrewView="goPrewView" @fresh="fresh"></MerchantReview>
    <DisableBuyer :isShowDetail.sync="isShowDisableBuyer" :dataInfo="disableInfo" :url="merchantStatustUrl" :id="merchantId" @fresh="fresh"></DisableBuyer>
    <AbleBuyer :isShowDetail.sync="isShowAbleBuyer" :dataInfo="ableInfo" :url="merchantStatustUrl" :id="merchantId" @fresh="fresh"></AbleBuyer>
  </div>
</template>

<script>
  import MerchantReview from './components/MerchantReview'
  import DisableBuyer from './components/DisableBuyer'
  import AbleBuyer from './components/AbleBuyer'
  import BuyerSubAccount from './components/BuyerSubAccount'
  export default {
    name: "MerchantList",
    components: { DisableBuyer, AbleBuyer, BuyerSubAccount, MerchantReview },
    data() {
      return {
        title: "采购商列表",
        isShowDetail: this.$route.params.type && this.$route.params.type === 1 ? false : false,
        searchInfo: {
          userName: "",
          agentId: "",
          salesmanName: "",
          enterprieName: "",
          status: ""
        },
        subTitle: "",
        merchantId: 0,
        // 分公司列表
        branchList: [],
        disableInfo: {},
        ableInfo: {},
        subDataInfo: {},
        isSuccess: false,
        isShowDisableBuyer: false,
        isShowAbleBuyer: false,
        dataTable: {
          border:true,
          loading:false,
          hasSelect:false,
          hasOperation:false,
          tr: [
            {
              id: '2',
              width: '120',
              label: '采购商账号',
              fixed: "left",
              prop: 'telphone'
            },
            {
              id: '3',
              label: '企业名称',
              prop: 'enterpriseName'
            },
            {
              id: '4',
              label: '门店地址',
              prop: 'deliveryArea'
            },
            {
              id: '5',
              label: '客服电话',
              width: '120',
              prop: 'contact'
            },
            {
              id: '6',
              label: '信用开通',
              show: 'template',
              prop: 'credit'
            },
            {
              id: '7',
              minWidth: '100',
              label: '所属分公司',
              prop: 'agentName'
            },
            {
              id: '8',
              minWidth: '100',
              label: '对接业务员',
              prop: 'salesmanName'
            },
            {
              id: '9',
              label: '账号状态',
              show: 'template',
              width: '90',
              prop: 'userStatus'
            },
            {
              id: '10',
              label: '操作',
              show: 'template',
              minWidth: "140",
              fixed: "right",
              prop: 'operation'
            }
          ],
          operation: [],
          data: []
        },
        merchantStatustUrl: apis.user.merchantStatus,
        pageTotal:0,
        pageSize:10,
        currentPage:1
      }
    },
    methods: {
      // 返回当前页面
      goPrewView() {
        this.isShowDetail = false;
        this.getData()
      },
      // 导出
      exportExcel() {
        this.isSuccess = true;
        let data = {
          ...this.searchInfo
        };
        ajax.export(apis.user.exportMerchantMannageExcel, data).then((res) => {
          this.isSuccess = false;
          if(res.code) {
            if(res.code === "10000000") {

            } else {
              this.$message.error(res.message)
            }
          }
        })
      },
      // 详情返回上一页
      goBack() {
        this.getData();
        this.isShowDetail = false;
      },
      // 刷新
      refreshFuc() {
        this.currentPage = 1;
        this.pageSize = 10;
        this.resetForm('searchInfo');
        this.onSearch()
      },
      getData() {
        this.dataTable.loading = true;
        let data = {
          ...this.searchInfo,
          pageNum: this.currentPage,
          pageSize: this.pageSize
        };
        ajax.post(apis.user.getMerchantStaffliet, data).then(res => {
          if(res.code === '10000000') {
            this.dataTable.data = res.data.dataList;
            this.pageTotal = res.data.total;
          } else {
            this.message.error(res.message)
          }
          this.dataTable.loading = false
        })
      },
      onSearch() {
        this.currentPage = 1;
        this.getData();
        // this.dataTable.loading = false
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      // 切换页面
      currentPageChange(pageNo) {
        this.currentPage = pageNo;
        this.getData()
      },
      // 切换页面条数
      pageSizeChange(pageNo) {
        this.pageSize = pageNo;
        this.getData()
      },
      fresh() {
        this.getData()
      },
      // 禁用采购商
      disabledBuyer(obj) {

        this.merchantId = obj.userId;
        this.disableInfo.name = obj.enterpriseName;
        this.isShowDisableBuyer = true;
      },
      // 解禁采购商\
      abledBuyer(obj) {
        this.merchantId = obj.userId;
        this.ableInfo.name = obj.enterpriseName;
        this.isShowAbleBuyer = true;
      },
      // 查看详情
      watchDetail(obj) {
        this.subTitle = "采购商详情";
        let data = {
          id: obj.id,
          statusNum: 1,
          status: obj.status,
          userId: obj.userId
        };
        ajax.post(apis.user.merchantReview, data).then(res => {
          if(res.code === "10000000") {
            this.subDataInfo = {
              status: 0,
              page: 1,
              telphone: obj.telphone,
              accountStatus: obj.userStatus,
              businessId: res.data.merchantPcVo.businessId,
              identityCard: {
                value: res.data.merchantPcVo.identityCardImage ? res.data.merchantPcVo.identityCardImage : "",
                isEdit: false
              },
              license: {
                value: res.data.merchantPcVo.licenseImage ? res.data.merchantPcVo.licenseImage : "",
                isEdit: false
              },
              cityId: res.data.merchantPcVo.cityId,
              otherQualification: {
                value: res.data.merchantPcVo.otherQualification ? res.data.merchantPcVo.otherQualification : "",
                isEdit: false
              },
              merchantId: obj.userId,
              id: res.data.merchantPcVo.id,
              enterpriseName: obj.enterpriseName,
              enterpriseAuthId: res.data.merchantPcVo.enterpriseAuthId,
              logo: res.data.merchantPcVo.logo ? res.data.merchantPcVo.logo : "",
              reTimeStart: res.data.merchantPcVo.reTimeStart,
              reTimeEnd: res.data.merchantPcVo.reTimeEnd,
              identityCardStart: res.data.merchantPcVo.certificateValidity ? res.data.merchantPcVo.certificateValidity.split('-')[0] : "",
              identityCardEnd: res.data.merchantPcVo.certificateValidity ? res.data.merchantPcVo.certificateValidity.split('-')[1] : "",
              deliveryIds: res.data.merchantPcVo.deliveryIds,
              userId: res.data.merchantPcVo.userId,
              merchantInfo: [
                {
                  label: "*采购商主体账号",
                  value: res.data.merchantPcVo.telphone,
                  type: "telphone"
                }, {
                  label: "审核状态",
                  value: res.data.merchantPcVo.status,
                  type: 'status'
                }, {
                  label: "*企业名称",
                  value: res.data.merchantPcVo.enterpriseName,
                  type: 'enterpriseName',
                  isEdit: false
                },  {
                  label: "所属分公司",
                  value: res.data.merchantPcVo.agentName,
                  type: "Branch"
                }, {
                  label: "客服电话",
                  value: res.data.merchantPcVo.contact,
                  type: 'contact',
                  isEdit: false
                }, {
                  label: "对接业务员",
                  value: res.data.merchantPcVo.salesmanName,
                  type: 'salesmanName'
                }, {
                  label: "*经营地址",
                  value: res.data.merchantPcVo.detailAdress,
                  type: 'detailAdress',
                  isEdit: false
                }, {
                  label: "所属渠道商",
                  value: res.data.merchantPcVo.channelDealerName,
                  type: 'channelDealerName'
                }, {
                  label: "*社会代码",
                  value: res.data.merchantPcVo.creditCode,
                  type: "creditCode",
                  isEdit: false
                }, {
                  label: "",
                  value: ""
                }
              ],
              otherInfo: [{
                label: "*注册主体人的名称",
                value: res.data.merchantPcVo.registrantName,
                type: "subjectPerson",
                isEdit: false
              }, {
                label: "*注册主体人身份证号码",
                value: res.data.merchantPcVo.registrantIdNum,
                type: "registeredIDNumber",
                isEdit: false
              }, {
                label: "*法人名称",
                value: res.data.merchantPcVo.legalName,
                type: "legalName",
                isEdit: false
              }, {
                label: "*法人身份证号码",
                value: res.data.merchantPcVo.idNumber,
                type: "identityCard",
                isEdit: false
              }, {
                label: "*法人身份证有效期",
                value: res.data.merchantPcVo.certificateValidity,
                type: "certificateValidity",
                isEdit: false
              }, {
                label: "入驻时间",
                value: res.data.merchantPcVo.auditTime,
                type: "auditTime"
              }, {
                label: "南京银行子账号",
                value: "",
                type: "legalIDNumber"
              }, {
                label: "华夏银行子账号",
                value: "",
                type: "legalIDNumber"
              }, {
                label: "预留银行卡所属行",
                value: "",
                type: "legalIDNumber",
                isEdit: false
              }, {
                label: "银行卡卡号",
                value: res.data.merchantPcVo.cardNo,
                type: "cardNo"
              }],
              originalinfo: {

              },

            };
            this.isShowDetail = true;
          } else {
            this.$message.error(res.message)
          }
        })
      },
      watchSubDetail(obj) {
        let data = {
          telphone: "",
          contact: "",
          status: "",
          perCodes: "",
          userId: obj.userId,
          pageNum: 1,
          pageSize: 10
        };
        ajax.post(apis.user.getMercgantStarffList, data).then(res => {
          let dataInfo = {
            ...res.data,
            id: obj.userId
          };
          if(res.code === "10000000") {
            this.$router.push({name: 'buyerSubAccount',params: dataInfo});
          } else {
            this.$message.error(res.message)
          }
        })
      },
      enterNextInput(inputName) {
        this.$refs["input-" + inputName].focus();
      },
      // 获取分公司
      getBranchList() {
        let data = {
          userType: '2'
        };
        ajax.post(apis.user.getBranchList, data).then(res => {
          if(res.code === '10000000') {
            this.branchList = res.data.dataList;
          } else {
            this.$message.error(res.message)
          }
        })
      }
    },
    created() {
      this.onSearch()
    }
  }
</script>

<style scoped>

</style>
